<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
        <meta name="format-detection" content="telephone=no" />
        <title>速来战-我的微信我主帅微信报名</title>
        <link href="__PUBLIC__/css/style.css" rel="stylesheet" type="text/css">
        <link href="__PUBLIC__/css/font-face.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="{:U('js/url')}"></script>
    </head>

    <body class="signup_bg">
        <div class="signup_banner">
            <div class="signup_title">
                <div class="signup_title_l"><span class="glyphicon glyphicon-tags"></span></div>
                <div class="signup_title_txt">速来战-我的微信我主帅报名</div>
            </div>
            <img src="__PUBLIC__/images/tmp/tmp.png" alt="">
        </div>
        <div class="signup_txt_box">
            活动说明

        </div>
        <div class="signup_inp_box">
            <div class="signup_inp_list">
                <div class="signup_inp_list_layer"><span class="glyphicon glyphicon-user"></span></div>
                <input type="text" name="name" onblur="if (this.value == '')
                            this.value = '姓名';" onfocus="if (this.value == '姓名')
                                        this.value = '';" name="" value="姓名" >
            </div>
            <div class="signup_inp_list">
                <div class="signup_inp_list_layer"><span class="glyphicon glyphicon-phone"></span></div>
                <input type="text" name="telephone" onblur="if (this.value == '')
                            this.value = '电话';" onfocus="if (this.value == '电话')
                                        this.value = '';" name="" value="电话">
            </div>
            <div class="signup_infor_list">
                
            </div>
            <div class="signup_inp_btn">
                <div class="signup_inp_btn_l">
                    <a href="###" id="tijiao">确 定</a>
                </div>
                <div class="signup_inp_btn_r">
                    <a href="###" id="restart">重 置</a>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                var signup = {
                    tijiao_btn: $('#tijiao'),
                    restart_btn: $('#restart'),
                    name_field: $("[name=name]"),
                    telephone_field: $("[name=telephone]"),
                    kind_field: $("[name=kind]"),
                    content_field: $('[name=content]'), //留言内容对象
                    ajax_status: 0, //Ajax请求状态
                    ajax_start: function() {
                        var _this = this;
                        var name = _this.name_field.val();
                        var telephone = _this.telephone_field.val();
                        var kind = _this.kind_field.val();
                        if (_this.check_fields(name, telephone)) {
                            _this.ajax_status = 1;
                            _this.tijiao_btn.html('报名信息上传中，请稍候...');
                            $.ajax({
                                type: "POST", //请求方式
                                url: app_url + "/sign_up/insert",
                                data: {name: name, telephone: telephone, kind: kind}, //数据
                                dataType: 'json', //返回数据类型
                                cache: false, //是否缓存
                                timeout: 20000, //超时时间
                                success: function(data) {
                                    _this.ajax_success_callback(data);
                                },
                                error: function() {
                                    _this.ajax_error();
                                }
                            });
                        }
                    },
                    ajax_success_callback: function(data) {
                        var _this = this;
                        if (data == 1) {
                            $('.signup_inp_box').html('您的报名信息已经成功提交！我们的工作人员会主动与您取得联系！');
                        } else {
                            _this.ajax_error();
                        }
                    },
                    ajax_error: function() {
                        alert("报名信息上传错误，请重新填写报名信息！");
                        location.reload();
                    },
                    check_fields: function(name, telephone) {
                        var _this = this;
                        if (name == '' || name == '姓名') {
                            _this.name_field.val('');
                            alert("请填写您的姓名！");
                            _this.name_field.focus();
                            return false;
                        }
                        if (telephone == '' || telephone == '电话') {
                            _this.telephone_field.val('');
                            alert("请填写您的联系电话！");
                            _this.telephone_field.focus();
                            return false;
                        }
                        return true;
                    },
                };

                signup.tijiao_btn.click(function() {
                    if (signup.ajax_status == 0) {
                        signup.ajax_start();  //开始进行Ajax请求
                    } else {
                        alert('报名信息上传中，请稍候...');
                    }
                });



            });
        </script>
    </body>
</html>
